<template>
  <div class="consult-fast-page">
  <GhNavBar title="快速咨询"   right-text="我的咨询" />
  <div class="fast-logo">
    <img class="img" src="@/assets/consult-fast.png" alt="" />
    <p class="text"> 快速匹配专业医生</p>
  </div>
  <div class="fast-type">
    <router-link
      to=""
      class="item"
    >
      <gh-icon class="pic" name="consult-doctor"></gh-icon>
      <div class="info">
        <p>三甲医院心理咨询师</p>
        <p>三甲主治及以上级别医生</p>
      </div>
      <van-icon name="arrow"></van-icon>
    </router-link>
    <router-link
      to=""
      class="item"
    >
      <gh-icon class="pic" name="consult-message"></gh-icon>
      <div class="info">
        <p>普通心理医院咨询师</p>
        <p>二甲主治及以上级别医生</p>
      </div>
      <van-icon name="arrow"></van-icon>
    </router-link>
  </div>
  </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import GhNavBar from '@/components/gh-nav-bar.vue'




</script>

<style lang="scss" scoped>
.consult-fast-page {
  padding-top: 46px;
  .fast-logo {
    padding: 30px 0;
    text-align: center;
    .img {
      width: 240px;
    }
    .text {
      font-size: 16px;
      margin-top: 10px;
      > span {
        color: var(--gh-primary);
      }
    }
  }
  .fast-type {
    padding: 15px;
    .item {
      display: flex;
      padding: 16px;
      border-radius: 4px;
      align-items: center;
      margin-bottom: 16px;
      border: 0.5px solid var(--gh-line);
    }
    .pic {
      width: 40px;
      height: 40px;
    }
    .info {
      margin-left: 12px;
      flex: 1;
      > p:first-child {
        font-size: 16px;
        color: var(--gh-text1);
        margin-bottom: 4px;
      }
      > p:last-child {
        font-size: 13px;
        color: var(--gh-tag);
      }
    }
    .van-icon {
      color: var(--gh-tip);
    }
  }
}

</style>
